<template>
	<div>
		<!-- 分割线 -->
		<div class="fenge">
			 <el-divider>
				 <span :class="{tp1:true,tp3:flag}" @click="changecolor1">公司新闻</span>
				 <span :class="{tp2:true,tp4:flag}" @click="changecolor2">行业动态</span>
			 </el-divider>
		</div>
	 <!-- 行业界面 -->
	<div class="new" v-for="el in arr2">
			  <router-link :to="{path:'/yj/news/detail',query:{'id':el.newsID}}">
				  <img :src="el.preview" alt="">
				  <div class="detail">
				  			  <div class="title">{{el.title}}</div>
				  			  <div class="content">{{el.text}}</div>
				      <div class="time">
				  				  <svg t="1664518386422" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2589" width="16" height="16"><path d="M949.638897 509.757936c0-241.799068-196.006116-437.805184-437.805184-437.805184-241.800092 0-437.806207 196.006116-437.806207 437.805184 0 241.811348 196.006116 437.817464 437.806207 437.817464 99.262748 0 190.149734-33.771151 263.59242-89.425705 3.015683-3.421936 4.999874-7.789407 4.999874-12.698207 0-10.717086-8.692986-19.407002-19.408025-19.407002-5.562692 0-10.513448 2.207271-14.048971 5.944386l-0.246617 0c-65.719794 48.358381-146.610102 77.313853-234.459916 77.313853-218.947618 0-396.469754-177.544649-396.469754-396.482033 0-218.97013 177.522136-396.470777 396.469754-396.470777 218.969107 0 396.469754 177.500647 396.469754 396.470777 0 66.865897-15.692401 129.814578-44.962028 185.110975l0 0.325411c-0.538259 1.845021-1.12359 3.645017-1.12359 5.627161 0 10.719132 8.688893 19.407002 19.407002 19.407002 8.353248 0 15.331173-5.357008 18.055215-12.742209l0 0.135076C931.289993 650.424676 949.638897 582.250994 949.638897 509.757936zM506.813373 276.017404c0-11.527544-9.367345-20.892843-20.917402-20.892843-11.527544 0-20.892843 9.365298-20.892843 20.892843l0 248.508887c0 0-2.520403 42.010813 41.786709 41.785685L731.994971 566.311976c0.068562 0 0.156566 0.045025 0.228197 0.045025 11.546987 0 20.914332-9.364275 20.914332-20.891819s-9.367345-20.892843-20.892843-20.938891L506.79086 524.526291 506.79086 276.153504C506.79086 276.108478 506.813373 276.06243 506.813373 276.017404z" p-id="2590" fill="#535656"></path></svg>
				  			  <span>{{el.updatetime}}</span>
				  			  </div>
				  </div>
				  <div class="hr"></div>
			  </router-link>
	</div>
	 <div id="page">
	 	<el-pagination background layout="prev, pager, next" :total="100" @current-change='CurrentChange' @size-change='fn1' />
	 </div>
	 <span>{{geshu}}</span>
	</div>
</template>

<script setup>
    
    import {ref, reactive,onBeforeMount,getCurrentInstance,onBeforeUpdate  } from 'vue';
    
    import {useRouter} from "vue-router";
    
    //循环次数
    let arr=reactive([1,2,3,4])
    
    // 后端数据
    
     
    	let arr1=reactive([]) //和vue2一样，请求数据时需要提前用一个空数组装
        let arr2=reactive([])
    	let s=ref("")
    	const {proxy} = getCurrentInstance(); //正常使用:语法糖环境默认为setup钩子
      
      	 onBeforeMount( async()=>{
      	 	let res=await proxy.$axios('/industry') //使用公共配置的$axios进行axios请求
      	 	//因为公共路径的配置所以多了一个api1，实际请求的网址为http://127.0.0.1:5137/api1/test
      	 	//此时会进行代理 转变为http://127.0.0.1:7001/test
      	 	 arr1.push(...res.data) //将请求的数据添加到外部的arr1中
    		 // console.log(arr1,6666)	
    		 
    		 //添加图片绝对路径
    		 arr1.forEach((el,index)=>{		
    			 
    		 		el.preview='http://localhost:7001'+el.preview
    
    		 
    		 })
    		 let j=ref(0)
    		 while(arr1[j.value]){
    			 j.value++
    			
    		 }
    		 s.value=j.value
    		 for(var i=0;i<4;i++){
    			 arr2.push(arr1[i])
    		 }
    		 
      	 })
      
      let geshu=ref("")
    
    
    
    //分页
    let CurrentChange=function(index){
    	geshu.value=index
    	// console.log(geshu.value,666)
    }
     
     onBeforeUpdate (()=>{
    	 if(geshu.value){
    		 console.log(99999)
    		 for(var i=0;i<4;i++){
    		 	arr2.pop()
    		 }
    		 	if(s.value>((geshu.value-1)*4+4)){
    				for(var i=(geshu.value-1)*4;i<((geshu.value-1)*4+4);i++){
    					arr2.push(arr1[i])
    				}
    				// console.log(arr2,357)
    			}
    		
    	 }
    	
     })
    
    
    //切换按钮
    let flag=ref(false)
    
    let router=useRouter()
    
    let changecolor1=function(){
    	flag.value=false
    	router.push({path:"/yj/news/new"})
    }	
    
    let changecolor2=function(){
    	flag.value=true
    	router.push({path:"/yj/news/industry"})
    }
</script>

<style lang="scss" scoped>
	//分割线
	.fenge{
		
		margin: 0 auto;
		margin-bottom: 85px;
		width: 1000px;
		span{
			cursor: pointer;
			display: inline-block;
			// background-color:black;
			margin-left: 20px;
			// margin-right: 20px;
			width: 210px;
			height:58px;
			text-align: center;
			line-height: 50px;
			font-size: 20px
	
		}
		.tp2{
			background-image: url('../img/news/red.png');
			color: white;
			// background-position: 1px 1px;
			font-size: 30px;
		}
		.tp1{
			background-image: url('../img/news/white.png');
			// background-position: 1px 1px;
			color: red;
			
		}
		.tp4{
			background-image: url('../img/news/white.png')!important;
			color: red;
		}
	
		.tp3{
			background-image: url('../img/news/red.png')!important;
			color: white;
		}
	}
	
	
	
	
	.new{
		cursor: pointer;
		width: 1200px;
		background-color: #fdfdfd;
		margin: 0 auto;
		margin-bottom: 10px;
		position: relative;
		img{
			width: 230px;
			height: 130px;
		}
		.detail{
			
			width: 900px;
			height: 130px;
			// background-color: pink;
			position: absolute;
			top: 0;
			left: 270px;
			.title{
				font-size: 20px;
				color: black;
			}
			.content{
				font-size:14px;
				color: #535656;
				margin-top: 10px;
				white-space:nowrap;        // 强制一行显示
					overflow:hidden;          // 超出隐藏
					text-overflow:ellipsis;   // 省略号
			}
			.time{
				font-size: 12px;
				width:100px;
				// height: 50px;
				margin-top:30px;
				// background-color: palegoldenrod;
				span{
					position: absolute;
					left: 20px;
					height: 0;
					color: #535656;
				}
			}
		}
		.hr{
			height: 3px;
			background-color: #e3e3e3;
		}
		
	}
	.new:hover{
		.hr{
			// height: 5px;
			background-color: #d51b1b;
		}
	}
	#page{
		width: 500px;
		margin: 0 auto;
		margin-bottom: 50px;
	}
</style>